第 2 步 - 更改选定项的外观

这一步中，您使用含状态机的列表框项容器 (List Box Item Container) 节点设置当前选定列表项的外观。

创建列表框项容器 (List Box Item Container)

在本节中，您将创建用于设置列表项被选中时的外观的列表框项容器 (List Box Item Container) 节点。在下一节中，您将为列表框项容器 (List Box Item Container) 节点创建状态机。

要创建列表框项容器 (List Box Item Container)：

1. 在预设件 (Prefabs) 中按下 Alt 并右键点击并创建 2D 列表框项容器 (List Box Item Container 2D) 预设件。
   使用 2D 列表框项容器 (List Box Item Container 2D) 更改列表框中当前所选项的外观。列表框项容器 (List Box Item Container) 必须始终为预设件。
   
2. 在您上一步创建的 2D 列表框项容器 (List Box Item Container 2D) 预设件中，创建两个图像 (Image) 节点并将其命名为 SelectionBar 和 ArrowIcon。
   使用 SelectionBar 和 ArrowIcon 节点显示哪个列表项被选中。
   

设置项的外观

在本节中，您将使用状态机设置在上一节中创建的列表框项容器 (List Box Item Container) 节点的外观。状态机设置当列表项被选中和未选中时的外观。

要设置项的外观：

1. 在预设件 (Prefabs) 中选择2D 列表框项容器 (List Box Item Container 2D) 节点并在状态工具 (State Tools) 中点击创建状态机 (Create State Manager)。
   
2. 在状态工具 (State Tools) 中点击两次创建状态 (Create State) 创建两个状态，双击每个状态的名称，然后重命名状态。
   例如，将一个状态命名为 NotSelected，另一个命名为 Selected。
   Selected 状态定义当用户选择列表框中的项时应用程序的状态，NotSelected 状态定义项未被选中时应用程序的状态。
   
3. 在状态工具 (State Tools) 中点击 <No Controller Property> 下拉菜单并选择列表框项容器 (List Box Item Container) > 已选定 (Selected) 属性。
   在状态机中，您为控制器属性 (Controller Property) 选择的属性值定义状态组中的各个状态处于活动状态时的条件。
   
4. 在状态工具 (State Tools) 中，为每个状态设置控制器属性的值。
   • 对于 NotSelected 状态，将值设置为 False。
   • 对于 Selected 状态，将值设置为 True。

   

5. 在预设件 (Prefabs) 中选择 SelectionBar 节点，在属性 (Properties) 中添加图像 (Image) 属性并将其设置为 SelectionBar 图像，在状态工具 (State Tools) 中点击 Selected 状态下的 ，以保存当前图像至该状态。
   设置状态机在用户选择网格列表框 (Grid List Box) 中的项时显示选择栏。
   
6. 在预设件 (Prefabs) 中选择 ArrowIcon 节点，在属性 (Properties) 中添加图像 (Image) 属性并将其设置为 ArrowGreen 图像，在状态工具 (State Tools) 中点击 Selected 状态下的 ，以保存当前属性值至该状态。
   
7. 在状态工具 (State Tools) 中选择 NotSelected 状态并为该状态重复上一步，但将 ArrowIcon 节点的 图像 (Image) 属性设置为 ArrowGray。
   
8. 在状态工具 (State Tools) 中点击编辑状态机 (Edit State Manager) 停用状态工具 (State Tools)。
   
9. 在预设件 (Prefabs) 中选择ArrowIcon 节点，在属性 (Properties) 中设置：
   • 布局高度 (Layout Height) 为 25
   • 水平对齐 (Horizontal Alignment) 为右对齐 (Right)
   • 垂直对齐 (Vertical Alignment) 为居中 (Center)

   将每个联系人项的箭头图标定位在该项右侧。
   

10. 在工程 (Project) 中选择 ContactsList 节点，在属性 (Properties) 中添加并设置项容器模板 (Item Container Template) 属性为 2D 列表框项容器 (List Box Item Container 2D)。
    项容器模板 (Item Container Template) 属性可让您在列表框中的项之间共享功能。设置项容器模板 (Item Container Template) 属性后，列表框中的每个项都会继承列表框项容器 (List Box Item Container) 节点的功能。例如，项容器模板 (Item Container Template) 可以包含状态机，用于更改列表框中选中项的外观。这样即可为每个项应用相同的功能。
    在预览 (Preview) 中，当您选择列表项，绿色选择栏移至该项。
    

接下来该做什么？

在本教程中，您学习了如何使用网格列表框 (Grid List Box) 节点来创建从数据源接收数据的可滚动联系人列表。您还学习了如何调整网格列表框 (Grid List Box) 以显示应用程序中的内容，以及如何设置当用户选择列表中的项时列表项的外观。现在您可以：

• 学习如何定义数据源。请参阅教程：从数据源获取应用程序数据。
• 学习如何使用状态机。请参阅教程：使用状态机控制您的应用程序。
• 了解如何异常加载列表项资源。请参阅异步加载和部署资源。
• 完成其他教程。请参阅教程。

另请参阅

要详细了解有关使用网格列表框 (Grid List Box) 节点的信息，请参阅使用网格列表框 (Grid List Box) 节点。

要详细了解有关使用列表框项容器 (List Box Item Container) 节点的信息，请参阅使用列表框项容器 (List Box Item Container) 预设件。

要详细了解有关使用列表框 (List Box) 节点的信息，请参阅列表框 (List Box) 节点。

要详细了解有关使用数据源的信息，请参阅教程：从数据源获取应用程序数据和使用数据源。

要详细了解有关使用状态机的信息，请参阅教程：使用状态机控制您的应用程序：教程：使用状态机控制您的应用程序和使用状态机。

打开导航